<template>
	<div class="header">
		<!-- 顶部导航条 -->
		<div class="nav-topbar">
			<div class="container">
				<div class="topbar-menu">
					<a href="javascript:;">小米商城</a>
					<a href="javascript:;">MUI</a>
					<a href="javascript:;">云服务</a>
					<a href="javascript:;">协议规则</a>
				</div>
				<div class="topbar-user">
					<a href="javascript:;" v-if="username">{{ username }}</a>
					<a href="javascript:;" v-else @click="goToLogin">登录</a>
					<a href="javascript:;" v-if="username" @click="logOut">退出</a>
					<a href="/order/list" v-if="username">我的订单</a>
					<a href="javascript:;" class="my-cart" :class="{ isCartNum: cartCount != 0 }" @click="goToCart">
						<span class="icon-cart" :class="{ isCartNum: cartCount != 0 }"></span>购物车
						<span>( {{ cartCount }} )</span>
					</a>
				</div>
			</div>
		</div>
		<div class="nav-header">
			<div class="container">
				<div class="header-logo">
					<a href="/index"></a>
				</div>
				<div class="header-menu">
					<div class="item-menu">
						<span>小米手机</span>
						<div class="children">
							<ul>
								<li class="product" v-for="(item, index) in phoneList" :key="index">
									<a :href="'/product/' + item.id" target="_blank">
										<div class="pro-img">
											<img v-lazy="item.mainImage" alt="item.subtitle" />
										</div>
										<div class="pro-name">{{ item.name }}</div>
										<div class="pro-price">{{ item.price | currency }}</div>
									</a>
								</li>
							</ul>
						</div>
					</div>
					<div class="item-menu">
						<span>RedMi红米</span>
						<!-- <div class="children"></div> -->
					</div>
					<div class="item-menu">
						<span>电视</span>
						<div class="children">
							<ul>
								<li class="product">
									<a href target="_blank">
										<div class="pro-img">
											<img v-lazy="'/imgs/nav-img/nav-3-1.jpg'" alt />
										</div>
										<div class="pro-name">小米壁画电视 65英寸</div>
										<div class="pro-price">6999元</div>
									</a>
								</li>
								<li class="product">
									<a href target="_blank">
										<div class="pro-img">
											<img v-lazy="'/imgs/nav-img/nav-3-2.jpg'" alt />
										</div>
										<div class="pro-name">小米全面屏电视E55A</div>
										<div class="pro-price">1999</div>
									</a>
								</li>
								<li class="product">
									<a href target="_blank">
										<div class="pro-img">
											<img v-lazy="'/imgs/nav-img/nav-3-3.png'" alt />
										</div>
										<div class="pro-name">小米电视4A 32英寸</div>
										<div class="pro-price">699元</div>
									</a>
								</li>
								<li class="product">
									<a href target="_blank">
										<div class="pro-img">
											<img v-lazy="'/imgs/nav-img/nav-3-4.jpg'" alt />
										</div>
										<div class="pro-name">小米电视4A 55英寸</div>
										<div class="pro-price">1799</div>
									</a>
								</li>
								<li class="product">
									<a href target="_blank">
										<div class="pro-img">
											<img v-lazy="'/imgs/nav-img/nav-3-5.jpg'" alt />
										</div>
										<div class="pro-name">小米电视4A 65英寸</div>
										<div class="pro-price">2699</div>
									</a>
								</li>
								<li class="product">
									<a href target="_blank">
										<div class="pro-img">
											<img v-lazy="'/imgs/nav-img/nav-3-6.png'" alt />
										</div>
										<div class="pro-name">查看全部</div>
										<div class="pro-price">小米电视</div>
									</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<div class="header-search">
					<div class="wrapper">
						<input type="text" name="keyword" />
						<a href="javascript:;"></a>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { mapState } from 'vuex';
export default {
	name: 'nav-header',
	data() {
		return {
			phoneList: [],
		};
	},
	computed: {
		...mapState(['username', 'cartCount']),
	},
	filters: {
		currency(val) {
			if (!val) return '0.00';
			return '￥' + val.toFixed(2) + '元';
		},
	},
	created() {
		this.getProductList();
	},
	methods: {
		goToLogin() {
			this.$router.push('/login');
		},
		getProductList() {
			this.$axios
				.get('/products', {
					params: {
						categoryId: '100012',
						pageSize: 6,
					},
				})
				.then(res => {
					this.phoneList = res.list;
				});
		},
		goToCart() {
			this.$router.push('/cart');
		},
		logOut() {
			this.$axios.post('/user/logout').then(() => {
				// 删除storage的数据
				sessionStorage.clear();
				this.$cookie.delete('userId');
				window.location.reload();
			});
		},
	},
};
</script>
<style lang="scss" scoped>
.header {
	.nav-topbar {
		height: 39px;
		line-height: 39px;
		background-color: #333333;
		.container {
			@include flex();
			a {
				display: inline-block;
				color: #b0b0b0;
				margin-right: 17px;
			}
			.my-cart {
				width: 110px;
				background-color: #424242;
				text-align: center;
				color: #b0b0b0;
				margin-right: 0;
				.icon-cart {
					@include bgImg(16px, 12px, '/imgs/icon-cart.png');
					margin-right: 4px;
				}
				&.isCartNum {
					color: #ffffff;
					background-color: #ff6600;
					.icon-cart {
						@include bgImg(16px, 12px, '/imgs/icon-cart-checked.png');
					}
				}
			}
		}
	}
	.nav-header {
		.container {
			@include flex();
			height: 112px;
			position: relative;
			.header-menu {
				display: inline-block;
				padding-left: 209px;
				width: 643px;
				.item-menu {
					display: inline-block;
					color: #333333;
					font-weight: bold;
					font-size: 16px;
					line-height: 112px;
					margin-right: 20px;
					span {
						cursor: pointer;
					}
					&:hover {
						color: $colorA;
						.children {
							height: 220px;
							opacity: 1;
						}
					}
					.children {
						position: absolute;
						top: 112px;
						left: 0;
						width: 1226px;
						height: 0;
						opacity: 0;
						overflow: hidden;
						border-top: 1px solid #e5e5e5;
						box-shadow: 0px 7px 6px 0px rgba(0, 0, 0, 0.11);
						transition: all 0.5s;
						background-color: #ffffff;
						z-index: 10;
						.product {
							position: relative;
							float: left;
							width: 16.6%;
							height: 220px;
							font-size: 12px;
							line-height: 12px;
							text-align: center;
							a {
								display: inline-block;
								.pro-img {
									height: 137px;
									img {
										width: auto;
										height: 111px;
										margin-top: 26px;
									}
								}
								.pro-name {
									font-weight: bold;
									margin-top: 19px;
									margin-bottom: 8px;
									color: $colorB;
								}
								.pro-price {
									color: $colorA;
								}
							}
							&::before {
								content: '';
								position: absolute;
								top: 28px;
								right: 0;
								border-left: 1px solid $colorF;
								height: 100px;
							}
							&:last-child::before {
								display: none;
							}
						}
					}
				}
			}
			.header-search {
				width: 319px;
				.wrapper {
					height: 50px;
					border: 1px solid #e0e0e0;
					display: flex;
					align-items: center;
					input {
						box-sizing: border-box;
						border: none;
						border-right: 1px solid #e0e0e0;
						width: 264px;
						height: 50px;
						padding-left: 14px;
					}
					a {
						@include bgImg(18px, 18px, '/imgs/icon-search.png');
						margin-left: 17px;
					}
				}
			}
		}
	}
}
</style>
